```tsx
import * as collapsible from "@zag-js/collapsible"
import { normalizeProps, useMachine } from "@zag-js/react"
import { useId } from "react"

function Collapsible() {
  const service = useMachine(collapsible.machine, { id: useId() })

  const api = collapsible.connect(service, normalizeProps)

  return (
    <div {...api.getRootProps()}>
      <button {...api.getTriggerProps()}>Collapse Trigger</button>
      <div {...api.getContentProps()}>Collape Content</div>
    </div>
  )
}
```
